<!--广告列表-->
<template>
  <div class="storePromotion">
    <div class="spinner" v-if="$store.state.loadingFlag">
      <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
    </div>
    <el-row class="top">
      <el-col :span="24">
        <span>广告列表</span>
        <el-button class="comfirmBtn newBtn" @click="add_advert">+新建</el-button>
      </el-col>
    </el-row>
    <div class="menu" style="height: 160px;">
      <el-row class="menu-content">
        <el-col :span="12">
          <div style="padding-left: 50px;">
            <span class="">广告名称：</span>
            <el-input class="menu_input" v-model="advName" style="width: 160px;margin-left: 15px;"></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <!--<div class="heig75">-->
            <!--<span>有效期：</span>-->
            <!--<el-date-picker-->
              <!--style="width: 30%;"-->
              <!--v-model="advStartTime"-->
              <!--type="date"-->
              <!--placeholder="选择日期范围" id="c_input1"-->
              <!--:picker-options="pickerOptions0">-->
            <!--</el-date-picker>-->
            <!--<span style="font-size: 14px;color:#656D78;display: inline-block;margin-left: 5px; ">&nbsp; —　</span>-->
            <!--<el-date-picker-->
              <!--style="width: 30%;"-->
              <!--v-model="advEndTime"-->
              <!--type="date"-->
              <!--placeholder="选择日期范围" id="c_input2"-->
              <!--:picker-options="pickerOptions0">-->
            <!--</el-date-picker>-->
          <!--</div>-->
          <div>
            <span>上下架状态：</span>
            <el-select v-model="advStatus" placeholder="全部" class="menu-select" style="width: 160px;">
              <el-option
                v-for="item in adv_status"
                :key="item.value"
                :label="item.typeName"
                :value="item.typeId">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <!--<el-col :span="6">-->
          <!--<div>-->
            <!--<el-button type="primary" style="width: 80px;" @click="resetData" class="comfirmBtn">重置</el-button>-->
            <!--<el-button type="primary" style="width: 80px;" @click="created_adv()" class="comfirmBtn">查询</el-button>-->
          <!--</div>-->
        <!--</el-col>-->
      </el-row>

      <el-row style="margin-top: 20px;">
        <el-col :span="12" style="padding-left: 50px; ">
          <div>
            <span>投放位置：</span>
            <!--<el-input class="menu_input" v-model="advAdress" style="width: 160px;margin-left: 15px;"></el-input>-->
            <el-select v-model="advAdress" placeholder="全部" class="menu-select" style="width: 160px;margin-left: 15px;">
              <el-option
                v-for="item in adv_adress"
                :key="item.value"
                :label="item.typeName"
                :value="item.typeId">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-button type="primary" style="width: 80px;" @click="resetData" class="comfirmBtn">重置</el-button>
            <el-button type="primary" style="width: 80px;" @click="created_adv()" class="comfirmBtn">查询</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content bgcolor1">
      <el-row class="c_title">
        <el-col :span="4"><span>广告名称</span></el-col>
        <el-col :span="4"><span>投放位置</span></el-col>
        <el-col :span="3"><span>上下架状态</span></el-col>
        <el-col :span="6"><span>显示时间</span></el-col>
        <el-col :span="3"><span>上下架</span></el-col>
        <el-col :span="4"><span>操作</span></el-col>
      </el-row>
      <div class="c-margin" :style="screenWidth<1367?'height: 80%;overflow: auto;':'height:90%;overflow: auto;'">
        <el-row class="c-list" v-for="(item,index) in advertList" :key="index"
                :style="index%2==0?'background-color: rgba(236,238,242,1);border-radius: 5px;':'border-radius: 5px;'">
          <el-col :span="4"><span>{{item.advertName}}</span></el-col>
          <el-col :span="4">
            <span v-if="item.advType==0" >首页bananer</span>
            <span v-if="item.advType==2">商家列表bananer</span>
          </el-col>
          <el-col :span="3">
            <span v-if="item.advertState==0">待上架</span>
            <span v-if="item.advertState==1">已上架</span>
          </el-col>
          <el-col :span="6"><span>{{item.startTime|Time}}至{{item.endTime|Time}}</span></el-col>
          <el-col :span="3" class="adv_status">
            <el-button type="text" @click="op_up(item)" :disabled="item.advertState==0?false:true"
                       :style="item.advertState==1?'color:#C9C9C9;':'color:#597380;'">
              上架
            </el-button>
            <el-button type="text" @click="op_down(item)" :disabled="item.advertState==1?false:true"
                       :style="item.advertState==0?'color:#C9C9C9;':'color:#597380;'">
              下架
            </el-button>
          </el-col>
          <el-col :span="4" class="adv_operation">
            <el-button type="text" class="o-edit" @click="edit_adv(item)">编辑</el-button>
            <el-button type="text" class="o-del" @click="del_adv(item)" :disabled="item.advertState==0?false:true"
                       :style="item.advertState==0?'color:#FF8761;':'color:#FEC8B7;'">
              删除
            </el-button>
            <el-button type="text" @click="top_adv(item)" :disabled="item.advertState==1?false:true"
                       :style="item.advertState==0?'color:#C9C9C9;':'color:#597380;'">
              置顶
            </el-button>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--弹框-->
    <div class="mask" v-if="maskShow"></div>
    <el-dialog style="text-align: center;position: absolute;" :visible.sync="maskShow" size="tiny" :modal="false"
               :close-on-click-modal="false">
      <span style="font-size: 14px;color: rgba(89,115,128,1)">{{maskTips}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="maskShow =false;delShow=false" v-if="delShow" class="cancleBtn">取 消</el-button>
        <el-button @click="del_comfirm" v-if="delShow" class="comfirmBtn">确 定</el-button>
        <el-button @click="maskShow=false;up_down_Show=false" v-if="up_down_Show" class="comfirmBtn">确 定</el-button>
      </span>
    </el-dialog>


    <div class="block">
      <el-pagination
        style="float: right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        layout=" prev, pager, next"
        :page-size="10"
        :total="pageTotal*10">
      </el-pagination>
      <div style="float: right;">
        <span style="margin-top: 5px;display: inline-block">共{{pageTotal}}页</span>
        <span style="margin-left: 20px;margin-top: 10px;">共计{{sumNumber}}条</span>
      </div>
    </div>


  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data(){
      return {
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() >= Date.now();
          }
        },
        screenWidth: document.body.clientWidth,
        currentPage: 1,
        maskShow: false,//弹框的显示
        maskTips: '',//弹框的提示内容
        delShow: false,//删除的确认按钮
        up_down_Show: false,//上下架提示确认按钮
        advertList: [],
        cur_advitem: "",//当前点击的广告项
        pageTotal: '',
        sumNumber: '',
        advName: '',
        advStatus: '',
        advStartTime: '',
        advEndTime: '',
        advAdress:'',
        adv_status: [
          {type: 2, typeId: "2", typeName: "全部"},
          {type: 0, typeId: "0", typeName: "待上架"},
          {type: 1, typeId: "1", typeName: "已上架"},
//          {type: 3, typeId: "3", typeName: "已下架"},
        ],
        adv_adress: [
          {type: -1, typeId: "-1", typeName: "全部"},
          {type: 0, typeId: "0", typeName: "首页"},
          {type: 2, typeId: "2", typeName: "商家列表"},
//          {type: 3, typeId: "3", typeName: "已下架"},
        ],
      }
    },
    watch: {
      advName(val, oldVal){
        if (oldVal && val.length == 0) {
          this.created_adv()
        }
      },
      advAdress(val){
      }
    },
    methods: {
      //页码
      handleSizeChange(val) {

      },
      resetData(){
          this.advName = this.advStartTime = this.advEndTime = this.advStatus =``
      },
      handleCurrentChange(val) {
//        this.$http.get(`${this.$store.state.path}/advert/${this.$store.state.storeId}?page=${val - 1}&size=10`)
//          .then(res => {
//            this.advertList = res.body.result.advertResponseDTOList;
//          }, res => {
//          }),
          this.page = val - 1
          this.currentPage = val;
        this.created_adv()
      },
      add_advert(){
        this.$router.push({path: '/add_Advert/'});//去新建广告路由
      },
      del_adv(item){
        this.cur_advitem = item;
        this.maskShow = true;
        this.delShow = true;
        this.maskTips = "确定将该广告删除?";
      },
      del_comfirm(){//确认删除广告
        this.$http.delete(`${this.$store.state.path}advert/${this.$store.state.storeId}/${this.cur_advitem.advertId}`)
          .then(res => {
            this.maskShow = false;
            this.delShow = false;
            this.created_adv();
          }, res => {

          })
      },
      op_up(item){//广告上架
        let advertid = item.advertId;
        let advType = item.advType;
        let advertList = [];
        let homeBanner = [];
        let storeBanner = [];
        this.$http.get(`${this.$store.state.path}advert/${this.$store.state.storeId}?page=0&size=1000`)
          .then(res => {
            if (res.body.resultCode == "0000") {
              advertList = res.body.result.advertResponseDTOList;
              if (advertList.length > 5) {
                for (var i = 0; i < advertList.length; i++) {
                  if ((advertList[i].advType == 0) && (advertList[i].advertState == 1)) {
                    homeBanner.push(advertList[i]);
                  }
                  if ((advertList[i].advType == 2) && (advertList[i].advertState == 1)) {
                    storeBanner.push(advertList[i]);
                  }
                }
                if (advType == 0 && homeBanner.length == 5) {
                  this.maskShow = true;
                  this.maskTips = '首页广告上架已超过5个，请先下架部分广告后再继续操作';
                  this.up_down_Show = true;
                  return false;
                }
                if (advType == 2 && storeBanner.length == 5) {
                  this.maskShow = true;
                  this.maskTips = '商家列表广告上架已超过5个，请先下架部分广告后再继续操作';
                  this.up_down_Show = true;
                  return false;
                }
              }
              this.$http.put(`${this.$store.state.path}advert/${this.$store.state.storeId}/${advertid}/1`)
                .then(res => {
                  this.created_adv();
                }, res => {
                })
            }
          }, res => {
          })
      },
      op_down(item){//广告下架
        let advertid = item.advertId;
        this.$http.put(`${this.$store.state.path}advert/${this.$store.state.storeId}/${advertid}/0`)
          .then(res => {
            this.created_adv();
          }, res => {
          })

      },
      top_adv(item){//广告置顶
        let advertId = item.advertId
        this.$http.delete(`${this.$store.state.path}advert/sort/${this.$store.state.storeId}/${advertId}/0`)
          .then(res => {
            this.created_adv();
          }, res => {

          })
      },
      edit_adv(item){//编辑广告
        this.$store.state.editAdvItem = item;//挂载在公共位置处
        this.$router.push({path: '/edit_Advert/'});//去编辑广告页面路由
      },
      created_adv(){//获取广告列表数据
        let val = this.currentPage;
        this.$store.state.loadingFlag = true
        this.advertList = []
        let path = ``
        if (this.advName) path += `&name=${this.advName}`
        if (this.advStatus) path += `&status=${this.advStatus}`
        if (this.advStartTime) path += `&startTime=${this.coverTimer(this.advStartTime + "")}`
        if (this.advEndTime) path += `&endTime=${this.coverTimer(this.advEndTime + "")}`
        if (this.advAdress) path += `&advType=${this.advAdress}`
        this.$http.get(`${this.$store.state.path}/advert/${this.$store.state.storeId}?page=${val - 1}&size=10${path}`)
          .then(res => {
            this.$store.state.loadingFlag = false
            if (res.body.result) {
              this.advertList = res.body.result.advertResponseDTOList;
              this.pageTotal = res.body.result.totalPage;
              this.sumNumber = res.body.result.sumNumber;
//              if(this.advAdress=='1'||!this.advAdress){
//                this.advertList = advertList
//              }
//              if(this.advAdress=='0'){
//                for(let i = 0;i<advertList.length;i++){
//                  if(advertList[i].advType==0){
//                    this.advertList.push(advertList[i])
//                  }
//                }
//              }
//              if(this.advAdress=='2'){
//                for(let i = 0;i<advertList.length;i++){
//                  if(advertList[i].advType==2){
//                    this.advertList.push(advertList[i])
//                  }
//                }
//              }
//              if(advType)
            }
            if (!res.body.result) {
              this.advertList = []
              this.pageTotal = 0
              this.sumNumber = 0
            }
          }, res => {

          })
      },

    },
    created(){
      let val = this.currentPage;
      this.$store.state.loadingFlag = true
      this.$http.get(`${this.$store.state.path}advert/${this.$store.state.storeId}?page=${val - 1}&size=10`)
        .then(res => {
          this.$store.state.loadingFlag = false
          if (res.body.resultCode == "0000") {
            this.advertList = res.body.result.advertResponseDTOList;
            this.pageTotal = res.body.result.totalPage;
            this.sumNumber = res.body.result.sumNumber;
          }
          if (!res.body.result) {
            this.advertList = []
            this.pageTotal = 0
            this.sumNumber = 0
          }
        }, res => {
        })

    }
  }
</script>
<style scoped>
  .bgcolor1 {
    background-color: #fff;
  }

  .storePromotion {
    font-family: MicrosoftYaHei;
    padding-left: 200px !important;
    background-color: #F5F5F5;
  }

  .storePromotion .top {
    height: 70px;
    line-height: 70px;
    background-color: #fff;
    font-size: 18px;
    color: #597380;
    position: relative;
    border-bottom: 1px solid #D7D9DD;
  }

  .storePromotion .top span {
    display: inline-block;
    width: 150px;
    height: 100%;
    line-height: 70px;
    text-align: center;
    border-right: 1px solid #D7D9DD;
  }

  .storePromotion .top .newBtn {
    position: absolute;
    top: 30px;
    right: 21px;
    width: 85px;
    height: 35px;
  }

  .storePromotion .content {
    margin: 20px 20px 0 20px;
    height: 60%;
    /*overflow: auto;*/
    border-radius: 5px;
    background-color: #fff;
    border-left: 1px solid #D7D9DD;
    border-right: 1px solid #D7D9DD;
    border-bottom: 2px solid #D7D9DD;
  }

  .storePromotion .content .c_title {
    height: 50px;
    line-height: 50px;
    padding: 0 13px;
    text-align: center;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    background-color: #57BDDE;
  }

  .storePromotion .content .c-margin {
    padding: 14px 13px;
  }

  .storePromotion .content .c-list {
    /*height:40px;*/
    line-height: 40px;
    text-align: center;
    font-size: 12px;
    color: #597380;
  }

  .adv_operation .o-del {
    display: inline-block;
  }

  .adv_operation .o-edit {
    color: #57BDDE;
  }

  .adv_status :last-child {
    display: inline-block;
    margin-left: 18px;
  }

  .adv_operation span {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
  }

</style>
